<template>
  <el-dialog
    v-if="visible"
    v-el-drag-dialog
    title="地址"
    :visible.sync="visible"
    width="1024px"
    append-to-body
  >
    <baidu-map
      :scroll-wheel-zoom="true"
      class="bm-view"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    >
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_RIGHT"
      />
      <bm-marker
        v-if="marker"
        :position="marker"
        animation="BMAP_ANIMATION_BOUNCE"
        :icon="{url: require('@/assets/images/point-red.png'), size: { width: 60, height: 60 }}"
      />
      <bm-marker
        v-if="marker2"
        :position="marker2"
        animation="BMAP_ANIMATION_BOUNCE"
        :icon="{url: require('@/assets/images/point-blue.png'), size: { width: 60, height: 60 }}"
      />
      <div class="legend">
        <div class="legend-item"><div class="label">签收地址</div><img class="image-point" src="@/assets/images/point-red.png"></div>
        <div class="legend-item"><div class="label">送气地址</div><img class="image-point" src="@/assets/images/point-blue.png"></div>
      </div>
    </baidu-map>
  </el-dialog>
</template>

  <script>
  export default {
    name: 'csm-location',
    data() {
      return {
        visible: false,
        center: {
          lat: '',
          lng: ''
        },
        marker: {
          lat: '',
          lng: ''
        },
        marker2: {
          lat: '',
          lng: ''
        },
        zoom: 15,
        show: false
      }
    },
    methods: {
      open(temp) {
        return new Promise((resolve) => {
          this.resolve = resolve
          if (temp) {
            this.marker.lat = ''
            this.marker.lng = ''
            this.marker2.lat = ''
            this.marker2.lng = ''
            if (temp.csmLat && temp.csmLon) {
              this.marker = {
                lat: temp.csmLat,
                lng: temp.csmLon
              }
              this.center.lng = temp.csmLon
              this.center.lat = temp.csmLat
            }
            if (temp.lat && temp.lon) {
              this.marker2 = {
                lat: temp.lat,
                lng: temp.lon
              }
              if (!temp.csmLat && !temp.csmLon) {
                this.center.lng = temp.lon
                this.center.lat = temp.lat
              }
            }
          }
          this.visible = true
        })
      },
      handler({ BMap, map }) {
      }
    }
  }
  </script>

  <style lang="scss" scoped>
  /deep/.el-dialog .el-dialog__body {
    padding: 0;
  }
  .bm-view {
    position: relative;
    width: 100%;
    height: 500px;
  }
  .legend {
    position: absolute;
    top: 15px;
    left: 10px;
    display: flex;
    font-size: 16px;
    color: black;
    .image-point {
      width: 30px;
      height: 30px;
    }
    .legend-item {
      display: flex;
      margin-right: 10px;
      .label {
        line-height: 30px;
      }
    }
  }
  </style>

